let main = document.querySelector(".main"),//图片区域
    img= document.querySelector(".img_box"),//ul.img_box
    carousel = document.querySelector(".carousel"),//carousel
    sec=document.querySelector(".sec"),// 底部圆点控制器 
    num=1,//计数变量
    lastIndex=1,//上一个操作下标
    timer,//定时器
    flag = true; // 设置开关, 默认可以打开

 if((localStorage.getItem("img")==null)||(localStorage.getItem("sec") == null)){
     console.log("网络");
    ajax("post","http://studentback.dfbuff.xyz/postMethod",
        (res)=>{
            res.result.forEach((val,idx) => {
                img.innerHTML +=`<li><img src=${val.content} alt=${idx+1}></li>`
                sec.innerHTML +=`<span class="dot ${idx  ==0? 'active':''}" data-index=${idx+1}></span>`
            })
            localStorage.setItem(`img`,img.innerHTML)
            localStorage.setItem(`sec`,sec.innerHTML)
            carouselFn()
        },
        {
            "type":"图片"
        }
    )

}else{
    console.log("本地");
    img.innerHTML=localStorage.getItem("img")
    sec.innerHTML=localStorage.getItem("sec")
    carouselFn()
}


function carouselFn() {
    // *插入克隆的第一张图片到最后一张图片之后的位置
    img.appendChild(img.firstElementChild.cloneNode(true))
    // *插入克隆的第四张图片到第一张之前的位置
    img.insertBefore(img.children[img.children.length - 2].cloneNode(true), img.firstElementChild)

    // *把原来的第一张图片放到中间显示
    img.style.transform = `translateX(-${num}00%)`

    // *设置图片滑动
    setTimeout(() =>img.style.transition = ".2s ease", 300)

    // *事件代理
    carousel.addEventListener("click",(e)=>{
        ;(e.target.className == "left")&&lt(e.target)
        ;(e.target.className == "right")&&rt(e.target)
        ;(e.target.classList.contains("dot")) && dotFn(e.target)
    })

    // *下一张
    function rt(target){
        if (flag) {
            flagFn()
            img.style.transform = `translateX(-${++num}00%)`
            //* 判断是否到达最后一张
            limit(img.children.length - 1, 1)

            // *获取具体span标签
            let rBtnEvent = target.parentElement.nextElementSibling.children[num - 1]
            dotColor(rBtnEvent)
        } 
    }

    // *上一张
    function lt(target){
        if (flag) {
            flagFn()
            img.style.transform = `translateX(-${--num}00%)`
            // *判断是否是第一张
            limit(0, img.children.length - 2)

            // *获取具体span标签
            let lBtnEvent = target.parentElement.nextElementSibling.children[num - 1]
            dotColor(lBtnEvent)
        }
    }

    //* 临界点跳转图片
    function limit(limitIndex, setIndex) {
        // *limitIndex 设置限制下标    setIndex 设置对应下标
        if (num == limitIndex) {
            num = setIndex
            img.addEventListener("transitionend", () =>{
                // *清除过渡效果, 并且ul恢复位置
                img.style.transition = "none"
                img.style.transform = `translateX(-${num}00%)`

                // *恢复过渡效果
                // *获取最终样式(被计算的样式)
                window.getComputedStyle(img, "style").getPropertyValue("transition-duration")
                img.style.transition = "0.2s ease"
            })
        }
    }

    // 底部原点
    function dotFn(target) {
        // 获取自定义属性的值，这个值可以和index对应
        let dataIndex = target.getAttribute("data-index")
        console.log(dataIndex)//1 2 3 4
        // 操作的值重新赋值到index，那么index就可以更新
        num = dataIndex
        img.style.transform = `translateX(-${num}00%)`

        // 调用小圆点颜色函数
        dotColor(target)
    }

    // 小圆点颜色变化函数
    function dotColor(tag) {
        tag.parentElement.children[lastIndex - 1].classList.remove("active")
        tag.classList.add("active")
        // 重新赋值给lastIndex，目的是为了拿到上一次的操作值index
        lastIndex = num
    }

    // 自动轮播
    timeFn()
    function timeFn() {
        (timer)&&clearInterval(timer)
        timer = setInterval( ()=>rt(img), 1000)
    }

    // 鼠标移入，停止定时器
    carousel.addEventListener("mouseover",()=>clearInterval(timer))
    // 鼠标移出开始定时器
    carousel.addEventListener("mouseleave", ()=>setTimeout(timeFn, 1000))
    // 检测页面是否切换，切换就停止定时器
    window.addEventListener("visibilitychange", ()=>document.hidden? clearInterval(timer): timeFn())

    // 控制开关
    function flagFn() {
        // 关闭开关
        flag = false
        img.addEventListener("transitionend", () =>flag = true)
    }
}

